@charset "utf-8";

.note-circle{
	right: 50px;
	bottom: 50px;
	cursor: pointer;
}

.note-center{
	z-index: 10000;
	top:0;
	right:0;
	left:0;
	bottom:0;
	width:45px;
	height:45px;
	animation: change 1s  ease-in  infinite;
    /*background-image:url("../images/.jpg"); */
	border-radius:50%;
	border:2px solid rgba(28, 215, 243, 0.8);
	color:rgba(28, 215, 243, 0.48);
	line-height:50px;
	margin:auto;
	position:absolute;
	text-align:center;
	-webkit-transition:all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out;
	transition:all 0.4s ease-out;
}

.note-ring{
	background-color: rgba(0,0,0,0.5);
	border-radius:50%;
	opacity:0;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:scale(0.1) rotate(-270deg);
	-moz-transform:scale(0.1) rotate(-270deg);
	-transform:scale(0.1) rotate(-270deg);
	-webkit-transition:all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out;
	transition:all 0.4s ease-out;
}

.note-menuItem{
	border-radius: 50%;
	color: while;
	display: block;
	height: 60px;
	line-height: 60px;
	margin-left: -30px;
	margin-top: -30px;
	position:absolute;
	text-align: center;
	width: 60px;
}

.note-circle, .note-ring{
	z-index: 9999;
	height: 160px;
	width: 160px;
	position: fixed;
}

.note-open .note-center{
	border-color:#aaaaaa;
}

.note-open .note-ring{
	opacity:1;
	-webkit-transform:scale(1) rotate(0);
	-moz-transform:scale(1) rotate(0);
	-transform:scale(1) rotate(0);
}

a.note-menuItem{
	text-decoration: none;
	color: #1cd7f3;
}

.note-open .note-center, .note-open a.note-menuItem{
	color:white;
}

@keyframes change {
	0%{ text-shadow: 0 0 4px rgba(28, 215, 243, 0.48)}
	50%{ text-shadow: 0 0 40px rgba(28, 215, 243, 0.48)}
	100%{ text-shadow: 0 0 4px rgba(28, 215, 243, 0.48)}
}

.fa .fa-2x{
	font-size:26px;
}